import { useState, useEffect } from 'react';
import { MailIcon, PhoneIcon, MapPinIcon, SendIcon } from 'lucide-react';

const Contact = () => {
  useEffect(() => {
    document.title = 'Contact Us | TronoraHub';
  }, []);

  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const {
      name,
      value
    } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    // Simulate form submission
    setTimeout(() => {
      setSubmitting(false);
      setFormSubmitted(true);
      setFormData({
        name: '',
        email: '',
        subject: '',
        message: ''
      });
    }, 1500);
  };
  return <div className="w-full bg-[#0d0d10] pt-24 pb-16">
      <div className="container mx-auto px-4">
        <h1 className="text-3xl md:text-4xl font-bold font-display mb-6">
          Contact Us
        </h1>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-12">
          {/* Contact Information */}
          <div className="lg:col-span-1">
            <div className="card p-6 h-full">
              <h2 className="text-xl font-bold mb-6">Get in Touch</h2>
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="bg-[#151518] p-3 rounded-lg mr-4">
                    <MailIcon size={20} className="text-[#4361ee]" />
                  </div>
                  <div>
                    <h3 className="text-sm font-medium mb-1">Email Us</h3>
                    <p className="text-[#8a8f98] text-sm mb-1">
                      General Inquiries:
                    </p>
                    <a href="mailto:info@tronorahub.com" className="text-[#4361ee] hover:underline">
                      info@tronorahub.com
                    </a>
                    <p className="text-[#8a8f98] text-sm mb-1 mt-2">
                      Press & Media:
                    </p>
                    <a href="mailto:press@tronorahub.com" className="text-[#4361ee] hover:underline">
                      press@tronorahub.com
                    </a>
                  </div>
                </div>
                <div className="flex items-start">
                  <div className="bg-[#151518] p-3 rounded-lg mr-4">
                    <PhoneIcon size={20} className="text-[#4361ee]" />
                  </div>
                  <div>
                    <h3 className="text-sm font-medium mb-1">Call Us</h3>
                    <p className="text-[#8a8f98] text-sm mb-1">Main Office:</p>
                    <p className="text-white">+1 (555) 123-4567</p>
                    <p className="text-xs text-[#8a8f98] mt-1">
                      Monday-Friday, 9AM-5PM PT
                    </p>
                  </div>
                </div>
                <div className="flex items-start">
                  <div className="bg-[#151518] p-3 rounded-lg mr-4">
                    <MapPinIcon size={20} className="text-[#4361ee]" />
                  </div>
                  <div>
                    <h3 className="text-sm font-medium mb-1">Visit Us</h3>
                    <p className="text-[#8a8f98] text-sm">
                      TronoraHub Headquarters
                    </p>
                    <p className="text-white">123 Tech Avenue</p>
                    <p className="text-white">San Francisco, CA 94105</p>
                  </div>
                </div>
              </div>
              <div className="mt-8 pt-8 border-t border-[#8a8f98]/20">
                <h3 className="text-sm font-medium mb-4">Follow Us</h3>
                <div className="flex space-x-4">
                  <a href="#" className="bg-[#151518] p-3 rounded-lg hover:bg-[#1a1a1d] transition-colors" aria-label="Follow us on X (formerly Twitter)">
                    <svg className="w-5 h-5 text-[#4361ee]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path>
                    </svg>
                  </a>
                  <a href="#" className="bg-[#151518] p-3 rounded-lg hover:bg-[#1a1a1d] transition-colors">
                    <svg className="w-5 h-5 text-[#4361ee]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd"></path>
                    </svg>
                  </a>
                  <a href="#" className="bg-[#151518] p-3 rounded-lg hover:bg-[#1a1a1d] transition-colors">
                    <svg className="w-5 h-5 text-[#4361ee]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 011.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 01-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 01-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 010 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 011.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 017.858 2h.193z"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          {/* Contact Form */}
          <div className="lg:col-span-2">
            <div className="card p-6">
              <h2 className="text-xl font-bold mb-6">Send Us a Message</h2>
              {formSubmitted ? <div className="text-center py-12">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#4361ee]/20 mb-6">
                    <svg className="w-8 h-8 text-[#4361ee]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold mb-2">Message Sent!</h3>
                  <p className="text-[#8a8f98]">
                    Thank you for reaching out. We'll get back to you as soon as
                    possible.
                  </p>
                  <button onClick={() => setFormSubmitted(false)} className="mt-6 text-[#4361ee] hover:underline">
                    Send another message
                  </button>
                </div> : <form onSubmit={handleSubmit}>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                      <label htmlFor="name" className="block text-sm font-medium mb-2">
                        Your Name
                      </label>
                      <input type="text" id="name" name="name" value={formData.name} onChange={handleChange} required className="w-full bg-[#151518] border border-[#8a8f98]/20 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#4361ee] focus:border-[#4361ee]" />
                    </div>
                    <div>
                      <label htmlFor="email" className="block text-sm font-medium mb-2">
                        Your Email
                      </label>
                      <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} required className="w-full bg-[#151518] border border-[#8a8f98]/20 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#4361ee] focus:border-[#4361ee]" />
                    </div>
                  </div>
                  <div className="mb-6">
                    <label htmlFor="subject" className="block text-sm font-medium mb-2">
                      Subject
                    </label>
                    <select id="subject" name="subject" value={formData.subject} onChange={handleChange} required className="w-full bg-[#151518] border border-[#8a8f98]/20 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#4361ee] focus:border-[#4361ee]">
                      <option value="">Select a subject</option>
                      <option value="General Inquiry">General Inquiry</option>
                      <option value="Product Review Request">
                        Product Review Request
                      </option>
                      <option value="Partnership Opportunity">
                        Partnership Opportunity
                      </option>
                      <option value="Press/Media">Press/Media</option>
                      <option value="Technical Support">
                        Technical Support
                      </option>
                      <option value="Other">Other</option>
                    </select>
                  </div>
                  <div className="mb-6">
                    <label htmlFor="message" className="block text-sm font-medium mb-2">
                      Your Message
                    </label>
                    <textarea id="message" name="message" rows={6} value={formData.message} onChange={handleChange} required className="w-full bg-[#151518] border border-[#8a8f98]/20 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#4361ee] focus:border-[#4361ee] resize-none"></textarea>
                  </div>
                  <button type="submit" disabled={submitting} className="button-primary py-3 px-8 rounded-lg flex items-center justify-center w-full md:w-auto">
                    {submitting ? <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div> : <SendIcon size={18} className="mr-2" />}
                    {submitting ? 'Sending...' : 'Send Message'}
                  </button>
                </form>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};
export default Contact;